﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
* {
    box-sizing: unset;
}
        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }
        .logo-list li{
            padding:8px;
        }
       .logo-list li:hover{
            background-color: #f3f3f3;
        }
        .type-list a:hover{
            color: #1299ec;
        }
        .skus {
            list-style: none;
        }
        .skus li{
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }
        .skus li.selected{
            border: 2px solid #dd1144;
        }
        .skus img{
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body >

<div id="searchApp">
<div id="nav-bottom">
    <ly-top/>
</div>


<!--list-content-->
<div class="main" >
    <div class="py-container">

        <div class="bread">
            <!--面包屑-->
            <ul class="fl sui-breadcrumb">
                <li><span>全部结果:</span></li>
                <li ><a href="#">手机</a></li>
                <li ><span>手机通讯</span></li>
            </ul>
            <!--已选择过滤项-->
            <ul class="tags-choose">
                <li class="tag">
                    品牌:<span style="color: red">apple</span>
                    <i class="sui-icon icon-tb-close"></i>
                </li>
                <li class="tag">
                    内存:<span style="color: red">4G</span>
                    <i class="sui-icon icon-tb-close"></i>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--selector-->
        <div class="clearfix selector">
            <!--展示非品牌数据-->
            <div class="type-wrap" v-for="(value,key,index) in remainFilterConditions" :key="index" v-if="key!='品牌'" v-show="index<5 || showMore">
                <div class="fl key">{{key}}</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li v-for="(v,i) in value" :key="i" @click="clickFilterParamHandler(key,v)">
                            <a>{{v.name || v}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <!--展示品牌数据-->
            <div class="type-wrap logo" v-else>
                <div class="fl key brand">品牌</div>
                <div class="value logos">
                    <ul class="logo-list">

                        <li v-for="(brand,k) in value" :key="k" v-if="brand.image" @click="clickFilterParamHandler(key,brand)">
                            <img :src="brand.image" />
                        </li>

                        <li style="text-align: center" v-else @click="clickFilterParamHandler(key,brand)">
                            <a style="line-height: 30px; font-size: 12px" href="#">{{brand.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext">
                    <a href="javascript:void(0);" class="sui-btn">多选</a>
                </div>
            </div>
            <div class="type-wrap" style="text-align: center">
                <v-btn small flat @click="showMore=true" v-if="!showMore">
                    更多<v-icon>arrow_drop_down</v-icon>
                </v-btn>
                <v-btn small="" flat @click="showMore=false" v-else>
                    收起<v-icon>arrow_drop_up</v-icon>
                </v-btn>
            </div>
        </div>
        <!--details-->
        <div class="details">
            <div class="sui-navbar">
                <div class="navbar-inner filter">
                    <ul class="sui-nav">
                        <li class="active">
                            <a href="#">综合</a>
                        </li>
                        <li>
                            <a href="#">销量</a>
                        </li>
                        <li>
                            <a href="#">新品</a>
                        </li>
                        <li>
                            <a href="#">评价</a>
                        </li>
                        <li>
                            <a href="#">价格</a>
                        </li>
                    </ul>
                    <div class="top-pagination">
                        <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                        <span><i style="color: red;">{{searchParams.page}}</i>/{{totalPage}}</span>
                        <a class="btn-arrow" href="javascript:void(0)" @click="prePage" style="display: inline-block">&lt;</a>
                        <a class="btn-arrow" href="javascript:void(0)" @click="nextPage" style="display: inline-block">&gt;</a>
                    </div>
                </div>
            </div>
            <div class="goods-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-5" v-for="(item,index) in items" :key="index">
                        <div class="list-wrap">
                            <div class="p-img">
                                <a :href="'/item/'+item.id+'.html'" target="_blank"><img :src="item.selectedSku.image" height="200"/></a>
                                <ul class="skus">
                                    <li :class="{selected:item.selectedSku.id==sku.id}" v-for="(sku,i) in item.skus" :key="i" @mouseover="item.selectedSku=sku">
                                        <img :src="sku.image">
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>{{ly.formatPrice(item.selectedSku.price)}}</i>
                                </strong>
                            </div>
                            <div class="attr" style="overflow: hidden">
                                <em v-html="item.spuName"></em>
                            </div>
                            <div class="cu" style="overflow: hidden">
                                <span>促</span><em v-html="item.subTitle"></em>
                            </div>
                            <div class="commit">
                                <i class="command">已有2000人评价</i>
                            </div>
                            <div class="operate">
                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="fr">
                <div class="sui-pagination pagination-large">
                    <ul>
                        <li :class="{prev:true,disabled:searchParams.page==1}">
                            <a href="javascript:void(0)" @click="prePage" >«上一页</a>
                        </li>
                        <li :class="{active:searchParams.page==index(i)}" v-for="i in Math.min(5,totalPage)">
                            <a href="javascript:void(0)" @click="toPage(index(i))">{{index(i)}}</a>
                        </li>
                        <li class="dotted"><span>...</span></li>
                        <li :class="{next:true,disabled:searchParams.page==totalPage}">
                            <a href="javascript:void(0)" @click="nextPage">下一页»</a>
                        </li>
                    </ul>
                    <div><span>共{{totalPage}}页&nbsp;</span><span>
      到第
      <input type="text" class="page-num">
      页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
                </div>
            </div>
        </div>
        <!--hotsale-->
        <div class="clearfix hot-sale">
            <h4 class="title">热卖商品</h4>
            <div class="hot-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_01.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_03.png"/>
                            </div>
                            <div class="attr">
                                <em>金属A面，360°翻转，APP下单省300！</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_04.png"/>
                            </div>
                            <div class="attr">
                                <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4068.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有20人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_02.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</div>

<script type="text/javascript">

    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            //前端->后端
            //searchParams: 封装前端传递给后端的参数
            searchParams:{
                key:'',//搜索关键词
                page:1,//当前页码
                filterParams:{},//存放所有的过滤规格参数
            },

            //后端->前端
            items:[],//商品列表
            total:1,//总记录数
            totalPage:1,//总页数
            filterConditions:{},//过滤条件
            showMore:false,//是否显示更多
        },
        //钩子函数
        created(){
            //1.获取搜索关键词
            let key = ly.getUrlParam('key');
            if(key==''){
                alert('请输入关键词');
                return;
            }

            //1.获取浏览器的URL的所有参数
            //使用search属性获取所有参数，并去掉最后一个？号
            let paramsStr = window.location.search.substring(1);

            //2.把paramStr转换Json对象
            let paramJson = ly.parse(paramsStr);

            //2.赋值给searchParams对象
            //设置参数的默认值
            paramJson.page = paramJson.page || 1;
            paramJson.filterParams = paramJson.filterParams || {};
            this.searchParams = paramJson;

            this.loadSearchPage();
        },
        watch:{
           //监听当前页码的变化
            "searchParams.page":{
                handler(){
                    //把当前变化后的page页码值拼接在URL的后面作为参数
                    this.replaceLocationURL();

                    //请求后台，商品列表的换页
                    this.pageChange();
                }
            }
        },
        //计算属性: 改变data定义的数据值
        computed:{
            remainFilterConditions(){
                //定义新的对象来存储剩下的对象
                let newFilterConditions = {};
                //遍历所有参数是，筛选值超过一个的参数
                for(let key in this.filterConditions){
                    if(this.filterConditions[key].length>1){
                        newFilterConditions[key] = this.filterConditions[key];
                    }
                }
                return newFilterConditions;
            }
        },
        methods:{
            //搜索商品
            loadSearchPage(){
                //2.给后端发送ajax请求
                ly.http.post('/search/page',this.searchParams).then(resp=>{
                       //接收后端返回的数据

                    //把商品对象中的skus属性转换为Json对象
                    resp.data.items.forEach(item=>{
                        item.skus = JSON.parse(item.skus);
                        //给item对象添加当前选中的Sku对象，默认把第一个Sku作为选中的Sku
                        item.selectedSku = item.skus[0];
                    });


                    this.items = resp.data.items;
                    this.total = resp.data.total;
                    this.totalPage = resp.data.totalPage;
                    //接收过滤条件
                    this.filterConditions = resp.data.filterConditions;
                }).catch(e=>{
                    console.log('搜索商品失败');
                });
            },
            //计算页码方块里面的数字值
            index(i){
                //当前页码为前3页或总页数小于5的时候，返回i
                if(this.searchParams.page<=3 || this.totalPage<=5){
                    return i;
                }else if(this.searchParams.page>=this.totalPage-2){
                    //当前页码为后3页的时候，返回总页数-5+i
                    return this.totalPage-5+i;
                }else{
                    //当前页码在前3和后3页之间的时候
                    return this.searchParams.page-3+i;
                }
            },
            //上一页
            prePage(){
                if(this.searchParams.page>1) {
                    this.searchParams.page--;
                }
            },
            //跳转到指定页
            toPage(curPage){
                this.searchParams.page=curPage;
            },
            //下一页
            nextPage(){
                if(this.searchParams.page<this.totalPage) {
                    this.searchParams.page++;
                }
            },
            //商品列表的换页方法
            pageChange(){
                ly.http.post('/search/pageChange',this.searchParams).then(resp=>{
                    //接收后端返回的数据

                    //把商品对象中的skus属性转换为Json对象
                    resp.data.forEach(item=>{
                        item.skus = JSON.parse(item.skus);
                        //给item对象添加当前选中的Sku对象，默认把第一个Sku作为选中的Sku
                        item.selectedSku = item.skus[0];
                    });
                    this.items = resp.data;
                }).catch(e=>{
                    console.log('加载分页商品数据失败');
                });
            },
            //点击筛选规格参数条件
            clickFilterParamHandler(key,value){
                //判断如果是分类和品牌，取出id值
                if(key=='品牌' || key=='分类'){
                    value = value.id;
                }

                //把当前选中的规格参数key和value存入filterParams中
                this.searchParams.filterParams[key] = value;

                //把选中的规格参数拼接到URL的后面
                this.replaceLocationURL();

                //重新查询整个商品页面
                this.loadSearchPage();
            },
            //改变浏览器的URL地址：把搜索参数作为URL后面的参数
            replaceLocationURL(){
                //1.把searchParams对象转为普通参数：格式：key=value&key=value
                let paramStr = ly.stringify(this.searchParams);
                //2.重新拼接出新的浏览器的URL
                let newURL = window.location.origin+window.location.pathname+"?"+paramStr;
                //3. 需求：改变浏览器的URL值
                // window.location.href 属性： 既会改变URL的值，也会产生重定向请求
                // window.histroy.replaceState(): 只会改变URL的值，而不会重定向
                //参数一：标题，参数二：状态码 参数三：新的URL值
                window.history.replaceState(null,null,newURL);
            }
        },

        components:{
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body >
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>